<template>
    <div>
        <div class='container'>
            <div class='handle-box'>
                17版基本类型：
                <el-select v-model='query.baseType' placeholder='17版基本类型' style='width: 300px' class='handle-select mr10'>
                    <el-option v-for='s in selectBaseTypeSource' :key='s.action' :label='s.action' :value='s.action'></el-option>
                </el-select>
                乡镇：
                <el-select v-model='query.villagesAndTowns' placeholder='乡镇' style='width: 300px' class='handle-select mr10'>
                <el-option v-for='s in selectVillagesAndTownsSource' :key='s.action' :label='s.action' :value='s.action'></el-option>
                </el-select>
                <el-button type='primary' icon='el-icon-search' @click=''>搜索</el-button>
                <el-button type='primary' icon='el-icon-refresh-left' @click=''>重置</el-button>
            </div>

            <div style='margin-top: 50px'>
                <el-row :gutter='20'>
                    <el-col :span='12'>
                        <div ref='main' style='width: 600px; height: 600px'></div>
                    </el-col>
                    <el-col :span='12'>
                        <div ref='main2' style='width: 600px; height: 600px'></div>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>


export default {
    name: 'showChars1',
    components: {},
    data() {
        return {
            query:{
                mainClass:'',
                villagesAndTowns:'',
                baseType:'',
            },
            //选择框选项值
            selectVillagesAndTownsSource:[],
            selectBaseTypeSource:[],
        };
    },
    //初始化函数
    mounted() {
        this.drawChart();
        this.drawChart2();
        this.initSelect()
    },
    methods: {
        initSelect(){
            this.$http.get('/basicserver/hsb/selectDistinctBaseType').then(res => {
                if (res.data.status) {
                    this.selectBaseTypeSource=res.data.data
                }
            });
            this.$http.get('/basicserver/hsb/selectDistinctVillagesAndTowns').then(res => {
                if (res.data.status) {
                    this.selectVillagesAndTownsSource=res.data.data
                }
            });
        },
        drawChart() {
            // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
            let myChart = this.$echarts.init(this.$refs['main']);
            // 指定图表的配置项和数据
            let option = {
                title: {
                    text: 'ECharts 入门示例'
                },
                tooltip: {},
                legend: {
                    data: ['数量']
                },
                xAxis: {
                    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                },
                yAxis: {},
                series: [
                    {
                        name: '数量',
                        type: 'bar',
                        data: [5, 20, 36, 10, 10, 20]
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        },
        drawChart2() {
            // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
            let myChart = this.$echarts.init(this.$refs['main2']);
            // 指定图表的配置项和数据

            let option = {
                legend: {
                    top: 'bottom'
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                series: [
                    {
                        name: 'Nightingale Chart',
                        type: 'pie',
                        radius: [50, 250],
                        center: ['50%', '50%'],
                        roseType: 'area',
                        itemStyle: {
                            borderRadius: 8
                        },
                        data: [
                            { value: 40, name: 'rose 1' },
                            { value: 38, name: 'rose 2' },
                            { value: 32, name: 'rose 3' },
                            { value: 30, name: 'rose 4' },
                            { value: 28, name: 'rose 5' },
                            { value: 26, name: 'rose 6' },
                            { value: 22, name: 'rose 7' },
                            { value: 18, name: 'rose 8' }
                        ]
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}

.table {
    width: 100%;
    font-size: 14px;
}

.red {
    color: #ff0000;
}

.yellow {
    color: #E6A23C;
}

.mr10 {
    margin-right: 10px;
}

.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
